<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="sreg">
        <img src="http://common-1253410441.costj.myqcloud.com/coverimg/20170810105532.png?=1" alt="">
        <div class="regcon">
            <div class="con">
                <p v-if="success" class="hidenelem">
                    恭喜你成功领取彩金
                </p>
                <div v-else>
                    <label>
                        <input v-model="phone" placeholder="输入手机号领取彩金" type="tel" maxlength="11">
                    </label>
                    <label>
                        <input v-model="yzm" class="countdown" placeholder="输入验证码" type="text" maxlength="6">
                        <strong v-if="sending" class="sending">
                            <Countdown value="60" :start="true" v-on:on-finish="setsending"></Countdown>
                            秒后重新获取
                        </strong>
                        <strong v-else="" @click="getyzm">
                            点击获取验证码
                        </strong>
                    </label>
                </div>

                <button v-if="success" @click="down">立即下载APP</button>
                <button v-else @click="submit"><b>立即领取</b></button>
                <span class="btninfo">{{cpname}}</span>
            </div>
            <img src="http://common-1253410441.costj.myqcloud.com/coverimg/20170810105542.png?v=2" alt="">
        </div>
    </div>
</template>

<script>
    import {Countdown, ToastPlugin} from 'vux';
    Vue.use(ToastPlugin);
    import {isphone, isiOS, getAppname} from '../../utils/common';
    function Toast(val, d) {
        this.$vux.toast.show({
            type: 'text',
            width: 'auto',
            time: d || 2000,
            text: val
        });
    }
    export default {
        data() {
            return {
                sending: false,
                phone: '',
                yzm: '',
                ucode: '',
                appCode: '3',
                success: false,
                bundleid: null,
                cpname: getAppname(this.appCode)
            }
        },
        components: {Countdown},
        methods: {
            getyzm(){
                const {phone}=this;
                if(!isphone(phone)) {
//                    Toast.call('请输入正确手机号');
                    Toast.call(this, '请输入正确手机号');

//                    this.call(Toast, '请输入正确手机号');
//                    this.$vux.toast.show({
//                        type: 'text',
//                        width: 'auto',
//                        text: '请输入正确手机号'
//                    });
                    return;
                }
                axios.get(`/user/Handler.ashx?action=704&params={"Mobile":"${phone}","TypeID":"1"}`)
                        .then(({data})=> {
                            this.sending = true;
                            if(data) {
                                debugger
                                if(data.code === 0) {
                                    this.ucode = data.data;
                                }
                                else {
                                    this.$vux.toast.show({
                                        type: 'text',
                                        width: 'auto',
                                        text: data.msg
                                    });
                                }
                            }
                        })
                        .catch(e => {
                            this.$vux.toast.show({
                                type: 'text',
                                width: 'auto',
                                text: `请求失败`
                            });
                        });
            },
            setsending(){
                this.sending = false;
            },
            down(){
                var headers = {
                    appCode: this.appCode || '3',
                    deviceType: isiOS() ? 'iOS' : 'Android'
                };
                if(this.bundleid) {
                    headers.bundleid = this.bundleid;
                }
                axios.get('/master/system/version/latest', {
                            headers: {
                                ...headers
                            }
                        })
                        .then(({data})=> {
                            if(data) {
                                if(data.code === 0) {
                                    window.location.href = data.data.marketUrl + '?downurl=' + encodeURIComponent(data.data.downloadUrl);
                                }
                                else {
                                    this.$vux.toast.show({
                                        type: 'text',
                                        width: 'auto',
                                        text: data.msg
                                    });
                                }
                            }
                        })
                        .catch(e=> {
                            this.$vux.toast.show({
                                type: 'text',
                                width: 'auto',
                                text: `请求失败`
                            });
                        });
            },
            submit(){
                const {phone, yzm, appCode, ucode}=this;
                if(phone && yzm) {
                    axios.get(`/user/Handler.ashx?action=703&params={"UserName":"${phone}","ValidCode":"${yzm}","RandomGuid":"${ucode}","EUserID":""}`, {
                                headers: {
                                    appCode: appCode || '3',
                                    channel: 'liuliang',
                                    devicecode: "",
                                    devicetype: 'h5',
                                    version: ''
                                }
                            })
                            .then(({data})=> {
                                if(data) {
                                    if(data.code === 0) {
                                        this.$vux.toast.show({
                                            type: 'text',
                                            width: 'auto',
                                            text: '注册成功'
                                        });
                                        this.success = true;
                                    }
                                    else {
                                        this.$vux.toast.show({
                                            type: 'text',
                                            width: 'auto',
                                            text: data.msg
                                        });
                                    }
                                }
                            })
                            .catch(e => {
                                this.$vux.toast.show({
                                    type: 'text',
                                    width: 'auto',
                                    text: `请求失败`
                                });
                            });
                }
            }
        },
        created() {
            var appcode = this.$route.query.appcode;
            var bundleid = this.$route.query.bundleid;
            if(bundleid) {
                this.bundleid = bundleid;
            }
            if(appcode) {
                this.appCode = appcode;
                this.cpname = getAppname(appcode);
                document.title = getAppname(appcode);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
    .sreg {
        img {
            width: 100%;
            display: block;
        }
    }

    .regcon {
        position: relative;
        .con {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            .hidenelem {
                height: 108px;
                color: #d13634;
                display: flex;
                text-align: center;
                font-size: 30px;
                font-weight: bold;
                justify-content: center;
                align-items: center;
            }
            label {
                display: flex;
                margin-bottom: 10px;
                box-sizing: border-box;
                padding: 0 10%;
            }
            .btninfo {
                bottom: 0;
                text-align: center;
                width: 100%;
                display: block;
                font-weight: bold;
                font-size: 20px;
            }
            input {
                flex: 1;
                height: 44px;
                box-sizing: border-box;
                display: flex;
                border: none;
                justify-content: center;
                align-items: center;
                align-self: center;
                border-radius: 4px;
                font-size: 18px;
                text-indent: 10px;
            }
            .countdown {
                width: 40%;
                margin-right: 10px;
                /*margin-left: 40px;*/
            }
            strong {
                flex: 1;
                height: 29px;
                background: #fff;
                border-radius: 4px;
                color: #fe5454;
                font-size: 15px;
                justify-content: center;
                align-items: center;
                align-self: center;
                display: flex;
                &.sending {
                    color: #666;
                    background: #999;
                }
            }
            button {
                width: 80%;
                height: 57px;
                background: linear-gradient(to bottom, #ffe16e, #eac42a);
                border: none;
                color: #d13634;
                font-size: 26px;
                display: flex;
                justify-content: center;
                margin: 0 auto;
                border-radius: 4px;
                box-shadow: 0 4px 0 #ae6200;
                margin-bottom: 20%;
                b {
                    width: 100%;
                    text-align: center;
                    justify-content: center;
                }
            }
        }
    }
</style>
